<div id="instance-modal" class="modal-dialog">
    <div class="modal-content">
        <div class="at-Panel-headingRow">
            <div class="col-xs-10">
                <h3 class="at-Panel-headingTitle">{{ vm.panelTitle }} | {{ vm.instanceGroupName}}</h3>
            </div>
            <div class="col-xs-2">
                <div class="at-Panel-dismiss">
                    <i class="fa fa-times-circle fa-lg" ng-click="vm.dismiss()"></i>
                </div>
            </div>
        </div>

        <multi-select-preview selected-rows='vm.selectedRows' available-rows='vm.instances'></multi-select-preview>
        <at-panel-body>
            <div class="at-List-toolbar">
                <smart-search
                    class="at-List-search"
                    django-model="instances"
                    base-path="{{vm.list.basePath}}"
                    iterator="add_instance"
                    list="vm.list"
                    collection="vm.instances"
                    dataset="vm.instance_dataset"
                    search-tags="vm.searchTags"
                    search-bar-full-width="true">
                </smart-search>
            </div>
            <at-list-toolbar
                ng-if="vm.instances.length > 0"
                sort-only="true"
                sort-value="vm.toolbarSortValue"
                sort-options="vm.toolbarSortOptions"
                on-sort="vm.onToolbarSort">
            </at-list-toolbar>
            <at-list results='vm.instances'>
                <at-row ng-repeat="instance in vm.instances"
                    ng-class="{'at-Row--active': (instance.id === vm.activeId)}">

                    <input type="checkbox"
                        class="at-Row-checkbox"
                        ng-class="{ 'at-Input--rejected': state.rejected }"
                        ng-checked="instance.isSelected"
                        ng-attr-tabindex="{{ tab || undefined }}"
                        ng-disabled="state._disabled"
                        ng-click="vm.toggleRow(instance)" />

                    <div class="at-Row-items" style="flex: 1">
                        <at-row-item
                            header-value="{{ instance.hostname }}"
                            header-tag="{{ vm.instanceTypes[instance.type] }}"></at-row-item>
                        </at-row-item>
                    </div>
                </at-row>
            </at-list>
            <paginate
                collection="vm.instances"
                dataset="vm.instance_dataset"
                iterator="add_instance"
                base-path="{{vm.list.basePath}}">
            </paginate>
            <div class="at-ActionGroup">
                <div class="pull-right">
                    <button class="btn at-ButtonHollow--default"
                        ng-click=vm.dismiss()>
                        {{:: vm.strings.get('CANCEL') }}
                    </button>
                    <button class="btn at-Button--success"
                        ng-click="vm.submit()">
                        {{:: vm.strings.get('SAVE') }}
                    </button>
                </div>
            </div>
        </at-panel-body>
    </div>
</div>
